<script setup>
import { Head, Link } from '@inertiajs/vue3'
import { computed, ref, watch } from 'vue'
import SpotlightLayout from '@/Layouts/SpotlightLayout.vue'
import Container from '@/Components/Spotlight/Container.vue'
import { formatDate } from '@/Components/Spotlight/utils/formatDate.js'
import PageHero from '@/Components/Spotlight/PageHero.vue'

const props = defineProps({
  archives: {
    type: Object,
    required: true,
  },
})

const archiveEntries = computed(() =>
  Object.entries(props.archives || {})
    .sort((a, b) => parseInt(b[0], 10) - parseInt(a[0], 10))
    .map(([year, posts]) => ({
      year,
      posts: (posts || []).map((post) => ({
        id: post.id,
        title: post.title,
        href: route('blog.posts.show', post.slug, false),
        publishedAt: formatDate(post.published_at),
      })),
    })),
)

const selectedYear = ref(null)

watch(
  archiveEntries,
  (entries) => {
    if (!entries.length) {
      selectedYear.value = null
      return
    }
    if (!selectedYear.value || !entries.some((entry) => entry.year === selectedYear.value)) {
      selectedYear.value = entries[0].year
    }
  },
  { immediate: true },
)

const selectedPosts = computed(() => {
  const match = archiveEntries.value.find((entry) => entry.year === selectedYear.value)
  return match?.posts ?? []
})

</script>

<template>
  <SpotlightLayout title="文章归档">
    <Head title="文章归档" />

    <Container class="mt-16 sm:mt-24">
      <PageHero
        title="按年份回顾每一次创作。"
        description="将文章按年份分组，帮助你快速回顾不同时期的主题与成长脉络。"
      />
    </Container>

    <Container class="mt-16 sm:mt-20 lg:mt-24">
      <div class="grid gap-10 lg:grid-cols-[minmax(0,220px)_minmax(0,1fr)] lg:gap-16">
        <aside class="rounded-3xl bg-zinc-50/50 p-6 dark:bg-zinc-900/50">
          <h2 class="text-sm font-semibold text-zinc-500 dark:text-zinc-400">
            年份导航
          </h2>
          <nav class="mt-4 space-y-2">
            <button
              v-for="entry in archiveEntries"
              :key="entry.year"
              type="button"
              class="flex w-full items-center justify-between rounded-xl px-4 py-2 text-sm font-medium transition"
              :class="[
                entry.year === selectedYear
                  ? 'bg-primary-50 text-primary-600 dark:bg-primary-500/10 dark:text-primary-300'
                  : 'text-zinc-600 hover:bg-white/80 hover:text-primary-600 dark:text-zinc-300 dark:hover:bg-zinc-800/60 dark:hover:text-primary-300'
              ]"
              @click="selectedYear = entry.year"
            >
              <span>{{ entry.year }}</span>
              <span class="text-xs font-normal text-zinc-400 dark:text-zinc-500">
                {{ entry.posts.length }}
              </span>
            </button>
          </nav>
        </aside>

        <section class="space-y-6">
          <header v-if="selectedYear" class="space-y-2">
            <h2 class="text-3xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100">
              {{ selectedYear }}
            </h2>
            <p class="text-sm text-zinc-500 dark:text-zinc-400">
              这一年共创作 {{ selectedPosts.length }} 篇文章。
                  </p>
          </header>

          <div v-if="selectedPosts.length" class="rounded-3xl bg-zinc-50/50 p-6 dark:bg-zinc-900/50">
            <ul class="divide-y divide-zinc-200/50 text-sm dark:divide-zinc-800/50">
              <li
                v-for="post in selectedPosts"
                :key="post.id"
                class="flex items-center justify-between gap-4 py-3"
              >
                <Link
                  :href="post.href"
                  class="flex-1 truncate text-base font-medium text-zinc-800 transition hover:text-primary-600 dark:text-zinc-100 dark:hover:text-primary-300"
                >
                  {{ post.title }}
                </Link>
                <time class="shrink-0 text-xs text-zinc-400 dark:text-zinc-500">
                  {{ post.publishedAt }}
                </time>
              </li>
            </ul>
          </div>
          <p v-else class="rounded-3xl bg-zinc-50/30 p-8 text-sm text-zinc-500 dark:bg-zinc-900/30 dark:text-zinc-400">
            这一年还没有文章记录。
          </p>
        </section>
      </div>
    </Container>
  </SpotlightLayout>
</template>
